<template>
	<view>
		<!-- 选择收货地址的盒子 -->
		<view class="address_box" v-if="JSON.stringify(address)==='{}'">
			<button type="primary" size="mini" class="btnchane" @click="addressclick">请选择收货地址+</button>
		</view>
		<!-- 渲染收货信息 的盒子 -->
		<view class="address_info_box" v-else @click="addressclick">
			<view class="row1">
				<view class="row1_left">
					<view class="username">
						收货人：<text>{{address.userName}}</text>
					</view>
				</view>
				<view class="row1_right">
					<view class="phone">
						电话：<text>{{address.telNumber}}</text>
					</view>
					<uni-icons type="arrowright" size="16"></uni-icons>
				</view>
			</view>
			<view class="row2">
				<view class="row2_left">
					<view class="">
						收货地址：
					</view>
				</view>
				<view class="row2_right">
					<text>{{addstr}}</text>
				</view>
			</view>
		</view>
		<!-- 底部边框线 -->
		<image src="/static/cart_border@2x.png" class="address_border"></image>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
				// address:{}
			};
		},
		methods:{
			// 选择收货地址的事件处理函数，是用uni提供的chooseAddress方法，获取地址
			async addressclick(){
				const [err,succ] = await uni.chooseAddress().catch(err=>err)
				
				if(err===null && succ.errMsg==='chooseAddress:ok'){
					// console.log(succ)
					this.$store.commit('UPADDRESS',succ)
				}	
			}
		},
		computed:{
			...mapState({address:(state)=>state.user.address}),
			...mapGetters(['addstr'])
		},
		created(){
		}
		
	}
</script>

<style lang="scss">
.address_border{
	display: block;
	width: 100%;
	height: 5px;
}
.address_box{
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.address_info_box{
	padding:0 5px ;
	font-size: 12px;
	height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;

}
.row1{
display: flex;
justify-content: space-between;
.row1_right{
	display: flex;
	justify-content: space-between;
}
}
.row2{
	display: flex;
	align-items: center;
	margin-top: 10px;
	.row2_left{
		// 文本不换行
		white-space: nowrap;
	}
}
</style>